<template>
    <!-- 下拉加多选框 -->
    <el-select v-model="selectedOptions" multiple :placeholder="placeholder" :popper-append-to-body="false"
        :style="selectWidth" @remove-tag="removeTag">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            <el-checkbox v-model="item.check" @change="isChecked(item)">
                {{ item.label }}
            </el-checkbox>
        </el-option>
        <div class="is-all">
            <div @click="selectAll(true)">全选</div>
            <div @click="selectAll(false)">反选</div>
        </div>
    </el-select>
</template>

<script setup lang="ts">
import { ref } from "vue"

type SelectIem = {
    value: string | number
    label: string
    check: boolean
}
let props = defineProps({
    options: {
        type: Array<SelectIem>,
        required: true,
    },
    placeholder: {
        type: String,
        default() {
            return '请选择'
        }
    },
    width: {
        type: Number,
        default() {
            return 220
        },
    },
})
let selectWidth = "width:" + props.width + "px"
const emit = defineEmits(["selected"])
let selectedOptions = ref<Array<string | number>>([])
const isChecked = (item: SelectIem) => {
    if (item.check && selectedOptions.value.indexOf(item.value) == -1) {
        selectedOptions.value.push(item.value)
    } else if (!item.check) {
        selectedOptions.value.forEach((elm, idx) => {
            if (elm == item.value) {
                selectedOptions.value.splice(idx, 1)
            }
        })
    }
    emit("selected", selectedOptions.value)
}
const removeTag = (value: any) => {
    props.options.forEach((elm) => {
        if (elm.value == value) {
            elm.check = false
        }
    })
    emit("selected", selectedOptions.value)
}
const selectAll = (isAll: boolean) => {
    if (isAll) {
        selectedOptions.value = []
        props.options.forEach((item: SelectIem) => {
            item.check = true
            selectedOptions.value.push(item.value)
        })
        console.log(selectedOptions.value)
    } else {
        let arr: Array<string | number> = []
        props.options.forEach((item) => {
            item.check = false
            if (!selectedOptions.value.includes(item.value)) {
                arr.push(item.value)
            }
        })
        selectedOptions.value = arr
    }
    emit("selected", selectedOptions.value)
}

const clearSelectedOptions = () => {
    selectedOptions.value = []
    props.options.forEach(item => item.check = false)
}

const echo = (roleIdList: number[]) => {
    selectedOptions.value = roleIdList
    props.options.forEach(item => {
        const roleId = roleIdList.find(roleId => roleId === item.value)
        item.check = roleId !== undefined
    })
}
defineExpose({
    clearSelectedOptions,
    echo
})
</script>

<style lang="scss">
.is-all {
    display: flex;
    padding-left: 10px;

    div {
        cursor: pointer;
        margin: 6px 10px;
        transition: 0.2s;

        &:hover {
            opacity: 0.7;
        }
    }
}
</style>